<!--@author vidy3587@gmail.com-->
<template>
  <div class="short-video-page with-padding-bottom">
    <div class="with-banner">
      <CloudCard title="作品征集">
        “人气短视频”大赛依托于戏度平台，结合线上线下两种方式，以剧本杀活动为主线，丰富校园生活为主旨，体现东大学子在抗击疫情中顽强乐观的态度，展现出当代大学生不凡的风采。
      </CloudCard>

      <div class="card">
        <div class="title-bar card-title">
          作品征集
        </div>
        <div class="requirement-content row">
          <div class="content-col col-1">
            <div class="content-title">
              内容要求
            </div>
            <div class="content-text">
              1、作品主题围绕“剧本杀”、“正能量”、“抗疫有你”等包含积极乐观、有正义感的内容；
              <br/>
              <br/>
              2、原创，题材新颖；
              <br/>
              <br/>
              3、作品严禁出现黄色、暴力、低俗、邪教、反政治元素，违规者将遭到平台的严厉惩戒。
            </div>
          </div>
          <div class="content-col col-1">
            <div class="content-title">
              作品要求
            </div>
            <div class="content-text">
              1.视频画面要求清晰稳定，无明显背景噪音；
              <br/>
              <br/>
              2.作品时长限3分钟及以内，视频大小限512MB；
              <br/>
              <br/>
              3.视频上传格式推荐为mp4，其他允许上传格式为avi、wmv、mpg、flv；
              <br/>
              <br/>
              4.视频的宽高比推荐16:9。
            </div>
          </div>
        </div>
        <div class="upload-btn text-center">
          <button class="btn pink-btn" @click="gotoUploadPate()">
            上传作品
          </button>
        </div>
      </div>
      <div class="rule">
        <div class="title-bar card-title">
          赛程赛制
        </div>
        <Schedule></Schedule>
        <div class="award-title">大赛奖项</div>
        <div class="award-list">
          <div class="award-row">
            <div class="award-item">
              <div class="award">一等奖</div>
              <div class="text-center award-description">
                第一名<br/>
                奖励switch一台
              </div>
            </div>
            <div class="award-item">
              <div class="award">二等奖</div>
              <div class="text-center award-description">
                第二名<br/>
                奖励air pods一台
              </div>
            </div>
          </div>

          <div class="award-row">
            <div class="award-item">
              <div class="award">三等奖</div>
              <div class="text-center award-description award-text-30">
                第三名<br/>
                奖励考研大礼包一份
              </div>
            </div>
            <div class="award-item">
              <div class="award">优秀奖</div>
              <div class="text-center award-description award-text-24">
                票数前十名中的其他同学，获得一张通用剧本杀体验券及戏度周边礼品
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fix-btn" @click="gotoUploadPate()">上传<br/>
      作品</div>
  </div>
</template>

<script>
import {getUserIdAndNickNameFromRouteQuery} from "@/core/shared/getUserIdAndNickName";
import Schedule from "@/pages/components/Schedule";
import CloudCard from "@/pages/components/CloudCard";

export default {
  components: {
    CloudCard,
    Schedule
  },
  name: "list",
  data() {
    return {
      rules: [
        "2021年8月9日-8月24日东南大学校内进行人气短视频大赛活动宣传；",
        "2021年8月25日-9月20日戏度APP内开通人气短视频大赛报名入口，选手报名并提交作品；",
        "2021年9月21日-9月29日戏度app内开通人气短视频大赛投票通道；",
        "2021年10月1日戏度APP内揭晓获奖名单。"
      ]
    };
  },
  created() {
    console.log("query",this.$route.query);
  },
  methods: {
    gotoUploadPate () {
      console.log("gotoUploadPate",this.$route.query);
      const userInfo = getUserIdAndNickNameFromRouteQuery(this);
      this.$router.push({
        name: "short_video_upload",
        query: {userId: userInfo.id, nickName: userInfo.name},
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-btn {
  margin-top: px2rem(50px);
}

.award-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
}
</style>

